<template>
  <view v-if="data" class="card-wrapper">
    <view class="header">
      <view class="title">{{data.organization}}</view>
      <view class="introduce">机构介绍</view>
    </view>
    <view class="body">
      <view class="course-name">{{data.courseName}}</view>
      <view class="datetime">{{data.startTime}} - {{data.endTime}}</view>
      <view class="expired">有效期至{{data.expired}}</view>
    </view>
    <view class="footer u-flex">
      <view class="course-number">
        <view class="number">{{data.courseCount}}</view>
        <view class="title">安排课时</view>
      </view>
      <view class="course-number">
        <view class="number">{{(data.courseCount - data.courseRest)}}</view>
        <view class="title">消耗课时</view>
      </view>
      <view class="course-number">
        <view class="number">{{data.courseRest}}</view>
        <view class="title">剩余课时</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'CourseSummaryCard',
    props: {
      data: {
        type: Object,
        default: null,
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card-wrapper {
    background: #FFFFFF;
    box-shadow: 0 4rpx 20rpx 0 rgba(226, 240, 255, 0.5);
    border-radius: 12rpx;
    padding: 32rpx 10rpx;
    
    .header {
      display: flex;
      justify-content: space-between;
      
      .title {
        position: relative;
        top: -15rpx;
        left: -30rpx;
        padding-left: 52rpx;
        width: 300rpx;
        height: 64rpx;
        background: #3EA9FF;
        font-size: 34rpx;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 64rpx;
        
        &::before {
          position: absolute;
          left: 0;
          top: 64rpx;
          content: '';
          border: 10rpx solid;
          border-color: #0068BC #0068BC #fff #fff;
        }
        
        &::after {
          position: absolute;
          right: -20rpx;
          content: '';
          border: 32rpx solid;
          border-color: #3EA9FF #fff #3EA9FF #3EA9FF;
        }
      }
      
      .introduce {
        width: 120rpx;
        margin-top: 10rpx;
        margin-right: 40rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #3EA9FF;
        text-align: right;
      }
    }
    
    .body {
      margin-top: 32rpx;
      text-align: center;
      
      .course-name {
        margin-bottom: 20rpx;
        font-size: 60rpx;
        font-weight: 500;
        color: #333333;
      }
      
      .datetime {
        margin-bottom: 20rpx;
        font-size: 28rpx;
        color: #999999;
      }
      
      .expired {
        width: 250rpx;
        padding: 4rpx 10rpx;
        margin: 0 auto 34rpx;
        background: #F8F8F8;
        border-radius: 32rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #999999;
      }
    }
    
    .footer {
      justify-content: space-around;
      
      .course-number {
        text-align: center;
        width: 200rpx;
        
        .number {
          font-size: 48rpx;
          font-weight: 500;
          color: #3EA9FF;
          margin-bottom: 8rpx;
        }
        
        .title {
          font-size: 34rpx;
          color: #999999;
        }
      }
    }
  }
</style>
